<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include.jsp"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title><fmt:message key="login.page.title" /></title>
<link rel="stylesheet" href="<c:url value="resources/css/carousel.css"/>" />
<link rel="stylesheet" href="<c:url value="resources/css/home.css"/>" />
<link rel="stylesheet" href="<c:url value="resources/css/panelConfig.css"/>" />
<link rel="stylesheet" href="<c:url value="resources/css/panelConflict.css"/>" />
<link rel="stylesheet" href="<c:url value="resources/css/jquery-ui.css"/>" />

<script type="text/javascript" src="<c:url value="resources/js/dateFormat.js"/>"></script>
<script type="text/javascript"	src="<c:url value="resources/js/jquery.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="resources/js/jquery-ui.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="resources/js/login.js"/>"></script>
<script type="text/javascript" src="<c:url value="resources/js/weekDay.js"/>"></script>
<script type="text/javascript" src="<c:url value="resources/js/infinitecarousel3.js"/>"></script>
<script type="text/javascript" src="<c:url value="resources/js/carousel.js"/>"></script>
<script type="text/javascript" src="<c:url value="resources/js/home.js"/>"></script>
<script type="text/javascript" src="<c:url value="resources/js/room.js"/>"></script>
<script type="text/javascript" src="<c:url value="resources/js/period.js"/>"></script>
<script type="text/javascript" src="<c:url value="resources/js/help.js"/>"></script>
<script type="text/javascript" src="<c:url value="resources/js/administration.js"/>"></script>
<script type="text/javascript" src="<c:url value="resources/js/timeout.js"/>"></script>

<link rel="stylesheet" href="<c:url value="resources/css/dhtmlxscheduler_glossy.css"/>" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="<c:url value="resources/css/planning.css"/>" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="<c:url value="resources/css/room.css"/>" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="<c:url value="resources/css/newPlanning.css"/>" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="<c:url value="resources/css/weekDay.css"/>"  media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="<c:url value="resources/css/loading.css"/>"  media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="<c:url value="resources/css/credits.css"/>"  media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="<c:url value="resources/css/administration.css"/>"  media="screen" title="no title" charset="utf-8" />

<script type="text/javascript" src="<c:url value="resources/js/json.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="resources/js/testUtil.js"/>"></script>

<script type="text/javascript" src="<c:url value="resources/js/dhtmlxscheduler.js"/>"></script>
<script type="text/javascript" src="<c:url value="resources/js/ext/dhtmlxscheduler_recurring.js"/>"></script>
<script type="text/javascript" src="<c:url value="resources/js/ext/dhtmlxscheduler_minical.js"/>"></script>
<script type="text/javascript"	src="<c:url value="resources/js/planning.js"/>"></script>
<script type="text/javascript"	src="<c:url value="resources/js/panelConfig.js"/>"></script>

<script type="text/javascript" src="<c:url value="resources/js/media.js"/>"></script> 
<script type="text/javascript" src="jquery.metadata.js"></script> 

</head>
<body>
<div id="roomPopUp" style="display: none; z-index: 100000;" class="content-popup">
	<fmt:message key="home.page.tab.rooms.title"/> 

	<div id="contentRoomsPlanification">
		<div id="contentRoomsPlanificationFilter"></div>
		<div id="contentRoomsPlanificationGride"></div>
		<button id="cancelSelectRoomPlanifiaction" onclick="closeSelectRoomPlanification();" class="appButtons" style="width: 1%;margin-left: 3%"><fmt:message key="home.page.tab.rooms.cancel"/></button>
	<br></br>
	<br></br>
	</div>
</div>
<div id="unlockSendedPlanifiactionDialog" style="display: none;" title=<fmt:message key="home.page.tab.planning.unlockPlannMsgtitle"/>>
	<p><fmt:message key="home.page.tab.planificationTab.unlockPlanMsg"/></p>
	<button id="unlockOk" onclick="unlockSendedPlanifiactionPhaseTwo()" class="appButtons"><fmt:message key="home.page.tab.planning.unlockPlannOkButton"/></button>
</div>
<div id="errorUnlockPlanificationDialog" style="display: none;" title=<fmt:message key="home.page.tab.planning.unlockPlannMsgtitle"/>>
	<p><fmt:message key="home.page.tab.planificationTab.errorUnlockPlanMsg"/></p>
</div>	
<div id="selectUnlockPlanificationDialog" style="display: none;" title=<fmt:message key="home.page.tab.planning.unlockPlannMsgtitle"/>>
	<p><fmt:message key="home.page.tab.planificationTab.notSelUnlockPlanMsg"/></p>
</div>
<div id="deletePlanificationDialog" style="display: none;" title=<fmt:message key="home.page.tab.planning.deletePlannMsgtitle"/>>
	<p><fmt:message key="home.page.tab.planificationTab.delPlanMsg"/></p>
	<button id="deleteOk" onclick="deletePlanificationPhaseTwo()" class="appButtons"><fmt:message key="home.page.tab.planning.deletePlannOkButton"/></button>
</div>
<div id="errorDeletePlanificationDialog" style="display: none;" title=<fmt:message key="home.page.tab.planning.deletePlannMsgtitle"/>>
	<p><fmt:message key="home.page.tab.planificationTab.errorDelPlanMsg"/></p>
</div>
<div id="selectDeletePlanificationDialog" style="display: none;" title=<fmt:message key="home.page.tab.planning.deletePlannMsgtitle"/>>
	<p><fmt:message key="home.page.tab.planificationTab.notSelPlanMsg"/></p>
</div>

<div id="unConfirmPlanificationDialog" style="display: none;" title=<fmt:message key="home.page.tab.planning.unConfirmPlannMsgTitle"/>>
	<p><fmt:message key="home.page.tab.planificationTab.unConfPlanMsg"/></p>
	<button id="unConfrimOk" onclick="unConfirmPlanificationPhaseTwo()" class="appButtons"><fmt:message key="home.page.tab.planning.unConfirmPlannOkButton"/></button>
</div>
<div id="selectUnConfirmPlanificationDialog" style="display: none;" title=<fmt:message key="home.page.tab.planning.unConfirmPlannMsgTitle"/>>
	<p><fmt:message key="home.page.tab.planificationTab.notUnConfirmSelPlanMsg"/></p>
</div>

<div id="selectOpenPlanificationDialog" style="display: none;" title=<fmt:message key="home.page.tab.planning.openPlannMsgtitle"/>>
	<p><fmt:message key="home.page.tab.planificationTab.notSelOpenPlanMsg"/></p>
</div>
<div id="dialogErrorAddPeriod" style="display: none;" title="Error">
	<p>Hubo un error al agregar un periodo especial.</p>
</div>
<div id="dialogPeriod1" style="display: none;" title="Mensaje">
	<p>Faltan datos para agregar el periodo.</p>
</div>
<div id="dialogPeriod2" style="display: none;" title="Mensaje">
	<p>El periodo especial ya existe o para la misma materia hay fechas que se superponen.</p>
</div>
<div id="dialogPeriod3" style="display: none;" title="Mensaje">
	<p>Hubo un error al eliminar periodo espacial.</p>
</div>
<div id="dialogErrorMail" style="display: none;" title="Mail NO enviado">
	<p>Su mail no pudo ser enviado, intente nuevamente en unos minutos.</p>
</div>
<div id="dialogSuccessMail" style="display: none;" title="Mail Enviado">
	<p>Su mail fue enviado correctamente.</p>
</div>
<div id="dialogSomthingError" style="display: none;" title="Error">
	<p>Algo anda mal, reinicie la aplicaci&oacuten.</p>
</div>
<div id="dialogScheduler1" style="display: none;" title="Mensaje">
	<p>Debe ingresar un <fmt:message key="room"/> para poder guardar la reserva.</p>
</div>
<div id="dialogScheduler2" style="display: none;" title="Mensaje">
	<p>Debe ingresar un <fmt:message key="room"/> para poder guardar la reserva.</p>
</div>
<div id="dialogScheduler3" style="display: none;" title="Mensaje">
	<p>La <fmt:message key="planning"/> de esta reserva ha sido enviada, los cambios que haga a la misma no se <fmt:message key="willSave"/>.</p>
</div>
<div id="dialogScheduler4" style="display: none;" title="Mensaje">
	<p>No Implementado.</p>
</div>
<div id="dialogHome1" style="display: none;" title="Mensaje">
	<p>No Implementado.</p>
</div>
<div id="dialogHome2" style="display: none;" title="Mensaje">
	<p>Usted necesita ingresar una carrera, un <fmt:message key="year"/> y el periodo para la <fmt:message key="planning"/> actual.</p>
</div>
<div id="dialogHome3" style="display: none;" title="Mensaje">
	<p>Se <fmt:message key="initialize"/> correctamente.</p>
</div>
<div id="dialogHome4" style="display: none;" title="Mensaje">
	<p>Error al inicializar verifique.</p>
</div>
<div id="dialogHome5" style="display: none;" title="Mensaje">
	<p>La <fmt:message key="planning"/> ya ha sido enviada.</p>
</div>
<div id="dialogHome6" style="display: none;" title="Mensaje">
	<p>La <fmt:message key="planning"/> ya ha sido confirmada.</p>
</div>
<div id="dialogHome7" style="display: none;" title="Mensaje">
	<p>La <fmt:message key="planning"/> tiene conflictos locales, la misma no puede ser enviada hasta que se resuelvan.</p>
</div>
<div id="dialogHome8" style="display: none;" title="Mensaje">
	<p>La <fmt:message key="planning"/> tiene conflictos, las reservas no pueden ser confirmadas hasta que se resuelvan.</p>
</div>
<div id="dialogHome9" style="display: none;" title="Mensaje">
	<p>Debe completar los datos.</p>
</div>
<div id="dialogHome10" style="display: none;" title="Mensaje">
	<p>Debe ingresar una materia.</p>
</div>


<div id="tabs">
	<ul>
		<li><a href="#presentationTab" onclick="whereAmI(0);"><fmt:message key="home.page.tab.home.title"/></a></li>
		<sec:authorize ifAnyGranted="1,2">
			<li><a href="#planificationTab" onclick="whereAmI(1);initPlanning();"><fmt:message key="home.page.tab.planning"/></a></li>
		</sec:authorize>
		<li><a href="#reservationTab" onclick="whereAmI(2);lockControl();"><fmt:message key="home.page.tab.reservation.title"/></a></li>
		<li><a href="#roomsTab" onclick="whereAmI(3);initRoom();"><fmt:message key="home.page.tab.rooms.title"/></a></li>
		<sec:authorize ifAnyGranted="1">
			<li><a href="#administrationTab" onclick="whereAmI(4);"><fmt:message key="home.page.tab.admin"/></a></li>
		</sec:authorize>
		<li><a href="#reservByEnvTab" onclick="whereAmI(5);initReservationsByEnv();"><fmt:message key="home.page.tab.reservation.by.env.title"/></a></li>
		<li><a href="#helpTab" onclick="whereAmI(6);"><fmt:message key="home.page.tab.help.title"/></a></li>
		<li><a href="#creditsTab" onclick="whereAmI(7);"><fmt:message key="home.page.tab.credits.title"/></a></li>
	</ul>
	<a id="logout" href=<c:url value="/logout"/>><fmt:message key="home.page.exit"/></a>
	<sec:authorize ifAnyGranted="1">
	<div id="administrationTab">
		<h1>Configuraci&oacuten del sistema</h1>
			<div id="adminButtonsContent">
				<button id="adminUsersABM" onclick="goToABMUser()" class="appButtons">Usuarios</button>
				<button id="adminSchoolABM" onclick="goToABMSchool()" class="appButtons">Facultades</button>
				<button id="adminCareer" onclick="goToABMCareer()" class="appButtons">Carreras</button>
				<button id="adminEnvABM" onclick="goToABMEnvironment()" class="appButtons">Ambientes</button>
				<button id="adminPriorityABM" onclick="goToPriority()" class="appButtons">Prioridades</button>
				<button id="adminShiftABM" onclick="goToABMShift()" class="appButtons">Turnos</button>
				<button id="adminPeriodABM" onclick="goToPeriod()" class="appButtons">Periodos</button>
				<button id="adminLockABM" onclick="goToLock()" class="appButtons">Bloqueos</button>
			</div>
			
			<div id="ABMSchool" style="display:none;">
				<h2>Facultades</h2>
				<div id="SchoolDataABM" class="adminContainersSeparations">
					<div class="adminSeparation"><label id="schoolId">Identificador: </label><input id="schoolIdABM" maxlength="5"/></div>
					<div class="adminSeparation"><label id="schoolName">Descripci&oacuten: </label><input id="schoolNameABM"/></div>
					<div class="adminSeparation"><button id="confirmSchoolABM" class="appButtons" onclick="saveSchool()">Agregar</button></div>
					<div class="adminSeparation" id="confirmAndCancelChangeAdminSch" style="display: none;">
						<button id="confirmChangeSchoolABM" class="appButtons" onclick="changeSchoolSuccess()">Modificar</button>
						<button id="cancelChangeSchoolABM" class="appButtons" onclick="resetSchoolFields()">Cancelar</button>
					</div>
				</div>
				<div id="SchoolInfoABM" class="adminContainersSeparations">
					<div id="SchoolContentAdmin" class="tablaContent">
					</div>
				</div>
			</div>

			<div id="ABMCareer" style="display:none;">
				<h2>Carreras</h2>
				<div id="CareerDataABM" class="adminContainersSeparations">
					<div class="adminSeparation"><input id="CareerIdABM" type="hidden"  /></div>
					<div class="adminSeparation"><label id="CareerName">Descripci&oacuten: </label><input id="CareerNameABM"/></div>
					<div class="adminSeparation"><label id="CareerSchool">Facultad: </label><select id="CareerSchoolABM" style="width: 30%;"></select></div>
					<div class="adminSeparation"><button id="confirmCareerABM" class="appButtons" onclick="saveCareer()">Agregar</button></div>
					<div class="adminSeparation" id="confirmAndCancelChangeAdminCar" style="display: none;">
						<button id="confirmChangeCareerABM" class="appButtons" onclick="changeCareerSuccess()">Modificar</button>
						<button id="confirmSubjectCareerABM" class="appButtons" onclick="goToABMSubject()">Gestionar materias</button>
						<button id="cancelChangeCareerABM" class="appButtons" onclick="resetCareerFields()">Cancelar</button>
					</div>
				</div>
				<div id="CareerInfoABM" class="adminContainersSeparations">
					<div id="CareerContentAdmin" class="tablaContent">
					</div>
				</div>
			</div>
			
			<div id="ABMSubject" style="display:none;" title="Materias" class="dialogContainer">
				<h3>Listado de matarias</h3>
				<div id="SubjectDataABM" class="adminContainersSeparations">
					<div class="adminSeparation"><label id="subjectId"></label><input id="subjectIdABM" type="hidden" /></div>
					<div class="adminSeparation"><label id="subjectName">Materia: </label><input id="subjectNameABM"/></div>
					<div class="adminSeparation"><label id="subjectYear">Año: </label>
						<select id="subjectYearABM" >
							<option value="1">1ro</option>
							<option value="2">2do</option>
							<option value="3">3ro</option>
							<option value="4">4to</option>
							<option value="5">5to</option>
						</select>
					</div>
					<div class="adminSeparation"><button id="confirmSubjectABM" class="appButtons" onclick="saveSubject()">Agregar</button></div>
					<div class="adminSeparation" id="confirmAndCancelChangeAdminSubject" style="display: none;">
						<button id="confirmChangeSubjectABM" class="appButtons" onclick="changeSubjectSuccess()">Modificar</button>
						<button id="cancelChangeSubjectABM" class="appButtons" onclick="resetSubjectFields()">Cancelar</button>
					</div>
				</div>
				<div id="subjectInfoABM" class="adminContainersSeparations">
					<div id="SubjectContentAdmin" class="tablaContent"></div>
				</div>
			</div>
			
	
			<div id="ABMEnvironment" style="display:none;">
				<h2>Ambientes</h2>
				<div id="enviDataABM" class="adminContainersSeparations">
					<div class="adminSeparation"><label id="enviName">Nombre: </label><input id="enviNameABM"/></div>
					<div class="adminSeparation"><label id="enviCapacity">Capacidad: </label><input id="enviCapacityABM" maxlength="4" style="width: 7%;"/></div>
					<div class="adminSeparation"><label id="enviActive">Activo: </label><input type='radio' name='active' value="true" checked="checked"/>Si<input type='radio' name='active' value="false"/>No</div>
					<div class="adminSeparation">
					<label id="enviBulding">Edificio: </label>
						<select id="listOfBuildingABM">
						  <option value="1">Central</option>
						  <option value="2">Monseñor Carlos Mullin</option>
						  <option value="3">Anexo FETS</option>
						</select>
					</div>
					
					
					<div class="adminSeparation">
					
					<canvas id="canvas" style='width: 40%;height: 35%;position: relative;display:none;'></canvas>
					<input type="file" id="file_input" value="" accept=".jpg,.png">
					<input type="text" id="valueImgFile" value="" style="display:none;"/>
					<script>
					$(function() {
					    $('#file_input').change(function(e) {
					        var file = e.target.files[0],
					            imageType = /image.*/;
					
					        if (!file.type.match(imageType))
					            return;
					
					        var reader = new FileReader();
					        reader.onload = fileOnload;
					        reader.readAsDataURL(file);        
					    });
					
					    function fileOnload(e) {
					    	$('#valueImgFile').val(e.target.result);
					        var $img = $('<img>', { src: e.target.result });
					        var canvas = $('#canvas')[0];
					        var context = canvas.getContext('2d');
					
					        $img.load(function() {
					            context.drawImage(this, 0, 0);
					        });
					    }
					});
					</script>
					
					</div>
					
					
					
					<div class="adminSeparation" id="confirmEnviABMDiv">
						<button id="confirmEnviABM" class="appButtons" onclick="saveEnvi()">Agregar</button>
						<button id="adminResourceABM" onclick="goToABMResource()" class="appButtons">Recursos</button>
					</div>
					<div class="adminSeparation" id="confirmAndCancelChangeAdminEnv" style="display: none;">
						<button id="confirmChangeEnviABM" class="appButtons" onclick="changeEnviSucces()">Modificar</button>
						<button id="confirmResourceEnviABM" class="appButtons" onclick="loadResourceEnvironment()">Asignar Recursos</button>
						<button id="cancelChangeEnviABM" class="appButtons" onclick="changeEnviCancel()">Cancelar</button>
					</div>
					
				</div>
				<div id="enviInfoABM" class="adminContainersSeparations">
					<div id="roomsContentAdmin" class="tablaContent">
					</div>
				</div>
				<div id="showImg" class='divAllPage' style="display:none;"><img id="imgForShow" onclick="setSizeImgBack();" style="max-width: 100%;max-height: 100%"/></div>
			</div>
				
			<div id="ABMResource" style="display:none;" title="Recursos" class="dialogContainer">
				<h3>Recursos de ambientes</h3>
				<div id="ResourceDataABM" class="adminContainersSeparations">
					<div class="adminSeparation"><label id="resourceId"></label><input id="resourceIdABM" type="hidden" /></div>
					<div class="adminSeparation"><label id="resourceName">Descripci&oacuten: </label><input id="resourceNameABM"/></div>
					<div class="adminSeparation"><button id="confirmResourceABM" class="appButtons" onclick="saveResource()">Agregar</button></div>
					<div class="adminSeparation" id="confirmAndCancelChangeAdminRes" style="display: none;">
						<button id="confirmChangeResourceABM" class="appButtons" onclick="changeResourceSuccess()">Modificar</button>
						<button id="cancelChangeResourceABM" class="appButtons" onclick="resetResourceFields()">Cancelar</button>
					</div>
				</div>
				<div id="ResourceInfoABM" class="adminContainersSeparations">
					<div id="ResourceContentAdmin" class="tablaContent"></div>
				</div>
			</div>
			
		
			<div style="display:none;" title="Recursos del ambiente" id="ResourceEnvironment" class="dialogContainer">
					 <fieldset class="checkboxes" id="ResourceEnvironmentList" ></fieldset>
					 <div align ="right" id="confirmResourceEnvironment">
					  <button id="confirmChangeResourceABM" class="appButtons" onclick="changeEnviSucces()">Guardar</button>
					 </div>
			</div>
			
			<div id="ABMUser" style="display:none;">
				<h2>Usuarios</h2>
				<div id="userDataABM" class="adminContainersSeparations">
					<div class="adminSeparation"><label id="userName">Nombre: </label><input id="userNameABM"/></div>
					<div class="adminSeparation">
					<label id="userRole">Perfil: </label>
						<select id="listOfRoleABM">
						  <option value="1">Administrador</option>
						  <option value="2">Operador</option>
						  <option value="3">Básico</option>
						</select>
					</div>
					<div class="adminSeparation"><button id="confirmUserABM" class="appButtons" onclick="saveUser()">Agregar</button></div>
					<div class="adminSeparation" id="confirmAndCancelChangeUserAdmin" style="display: none;">
						<button id="confirmChangeEnviABM" class="appButtons" onclick="changeUserSuccess()">Modificar</button>
						<button id="cancelChangeEnviABM" class="appButtons" onclick="changeUserCancel()">Cancelar</button>
					</div>
				</div>
				<div id="userInfoABM" class="adminContainersSeparations">
					<div id="userContentAdmin" class="tablaContent">
					</div>
				</div>
			</div>
			
			<div id="ABMShift" style="display:none;">
				<h2>Turnos</h2>
				<div id="shiftDataABM" class="adminContainersSeparations">
					<div class="adminSeparation"><label id="shiftName">Descripci&oacuten: </label><input id="shiftNameABM"/></div>
						<div class="adminSeparation">
							<label><fmt:message key="home.page.tab.rooms.filter.initTime"/></label>
							<select style="width:60px;" id="startTimeShift" onchange="setAvailables();"></select>
						</div>
						<div class="adminSeparation">
							<label><fmt:message key="home.page.tab.rooms.filter.endTime"/></label>
							<select style="width:60px;" id="endTimeShift" onchange="setAvailables();"></select>
						</div>
					<div class="adminSeparation"><button id="confirmShiftABM" class="appButtons" onclick="saveShift()">Agregar</button></div>
					<div class="adminSeparation" id="confirmAndCancelChangeShiftAdmin" style="display: none;">
						<button id="confirmChangeShiftABM" class="appButtons" onclick="changeShiftSuccess()">Modificar</button>
						<button id="cancelChangeShiftABM" class="appButtons" onclick="changeShiftCancel()">Cancelar</button>
					</div>
				</div>
				<div id="ShiftInfoABM" class="adminContainersSeparations">
					<div id="shiftContentAdmin" class="tablaContent">
					</div>
				</div>
			</div>
			<div id="ABMPeriod" style="display:none;">
				<h2>Periodos</h2>
				<div id="periodDataABM" class="adminContainersSeparations">
					<div class="adminSeparation"><label id="periodName">Descripci&oacuten: </label><input id="periodNameABM"/></div>
					<div class="adminSeparation"><label id="periodStartDay">Día inicio: </label><input id="startDayPeriod" class="filterInputDateAdmin"/></div>
					<div class="adminSeparation"><label id="periodEndDay">Día final: </label><input id="endDayPeriod" class="filterInputDateAdmin"/></div>
					
					<div class="adminSeparation"><button id="confirmPeriodABM" class="appButtons" onclick="savePeriod()">Agregar</button></div>
					<div class="adminSeparation" id="confirmAndCancelChangePeriodAdmin" style="display: none;">
						<button id="confirmChangePeriodABM" class="appButtons" onclick="changePeriodSuccess()">Modificar</button>
						<button id="cancelChangePeriodABM" class="appButtons" onclick="changePeriodCancel()">Cancelar</button>
					</div>
				</div>
				<div id="periodInfoABM" class="adminContainersSeparations">
					<div id="periodContentAdmin" class="tablaContent"></div>
				</div>
			</div>
			
			<div id="ABMLock" style="display:none;">
				<h2>Bloqueo</h2>
				<div id="lockDataABM" class="adminContainersSeparations">
					<div class="adminSeparation"><label id="lockName">Descripci&oacuten: </label><input id="lockNameABM"/></div>
					<div class="adminSeparation"><label id="lockStartDay">Día inicio: </label><input id="startDayLock" class="filterInputDateAdmin"/></div>
					<div class="adminSeparation"><label id="lockEndDay">Día final: </label><input id="endDayLock" class="filterInputDateAdmin"/></div>
					
					<div class="adminSeparation"><button id="confirmLockABM" class="appButtons" onclick="saveLock()">Agregar</button></div>
					<div class="adminSeparation" id="confirmAndCancelChangeLockAdmin" style="display: none;">
						<button id="confirmChangeLockABM" class="appButtons" onclick="changeLockSuccess()">Modificar</button>
						<button id="cancelChangeLockABM" class="appButtons" onclick="changeLockCancel()">Cancelar</button>
					</div>
				</div>
				<div id="lockInfoABM" class="adminContainersSeparations">
					<div id="lockContentAdmin" class="tablaContent"></div>
				</div>
			</div>
			
			
			<div id="ABMPriority" style="display:none;">
				<h2>Prioridad</h2>
				<div id="priorityDataABM" class="adminContainersSeparations">
					<div class="adminSeparation" style="display:none;"><label id="priorityName">Facultad: </label><input id="priorityNameABM"/></div>
					<div class="adminSeparation"><label id="priorityName">Facultad: </label><select id="priorityNameABM2" style="width: 30%;"></select></div>
					<div class="adminSeparation"><label id="priorityRoomName">Ambiente: </label><select id="priorityRoomNameABM" style="width: 10%;"></select></div>
					<div class="adminSeparation"><label id="priorityShiftName">Turno: </label><select id="shiftRoomNameABM" style="width: 20%;"></select></div>
					
					<div class="adminSeparation"><button id="confirmPriorityABM" class="appButtons" onclick="savePriority()">Guardar</button></div>
					<div class="adminSeparation" id="confirmAndCancelChangePriorityAdmin" style="display: none;">
						<button id="confirmChangePriorityABM" class="appButtons" onclick="changePrioritySuccess()">Modificar</button>
						<button id="cancelChangePriorityABM" class="appButtons" onclick="changePriorityCancel()">Cancelar</button>
					</div>
				</div>
				<div id="priorityInfoABM" class="adminContainersSeparations">
					<div id="priorityContentAdmin" class="tablaContent"></div> 
				</div>
			</div>
			<button id="volverABM" onclick="volverABM();" class="appButtons" style="display: none;">Volver</button>
	</div>
	</sec:authorize>
	<div id="loadingDivBlock" class="grayBackground">
    </div>
	<div id="proccesingSpinner" class="planning_l_spinner">
        <div id="inTurnFadingTextG" style="width: 100%;">
			<div class="inTurnFadingTextG inTurnFadingTextG_1">Pro</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_2">ce</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_3">san</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_4">d</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_5"><fmt:message key="home.page.tab.home.loading.spR"/></div>
			<div class="inTurnFadingTextG inTurnFadingTextG_6">es</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_7">er</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_8">va</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_9">s.</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_10">.</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_11">.</div>
		</div>
        <div id="warningGradientOuterBarG1" style="margin-top:20%; margin-left:25%;">
			<div id="warningGradientFrontBarG1" class="warningGradientAnimationG">
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
			</div>
		</div>
    </div>
    <div id="loadingSpinner" class="planning_l_spinner">
        <div id="inTurnFadingTextG" style="width: 100%;">
			<div class="inTurnFadingTextG inTurnFadingTextG_1">Ca</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_2">rg</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_3">an</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_4">d</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_5"><fmt:message key="home.page.tab.home.loading.spR"/></div>
			<div class="inTurnFadingTextG inTurnFadingTextG_6">es</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_7">er</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_8">va</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_9">s.</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_10">.</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_11">.</div>
		</div>
        <div id="warningGradientOuterBarG2" style="margin-top:20%; margin-left:25%;">
			<div id="warningGradientFrontBarG2" class="warningGradientAnimationG">
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
			</div>
		</div>
    </div>
    <div id="loadingSpinnerGrl" class="planning_l_spinner">
        <div id="inTurnFadingTextG" style="width: 100%;">
			<div class="inTurnFadingTextG inTurnFadingTextG_1">Ca</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_2">rg</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_3">an</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_4">d</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_5"><fmt:message key="home.page.tab.home.loading.spPe"/></div>
			<div class="inTurnFadingTextG inTurnFadingTextG_6">er</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_7">io</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_8">do</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_9">s.</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_10">.</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_11">.</div>
		</div>
        <div id="warningGradientOuterBarG3" style="margin-top:20%; margin-left:25%;">
			<div id="warningGradientFrontBarG3" class="warningGradientAnimationG">
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
			</div>
		</div>
    </div>
    <div id="loadingPlannSpinner" class="planning_l_spinner">
        <div id="inTurnFadingTextG" style="width: 100%;">
			<div class="inTurnFadingTextG inTurnFadingTextG_1">Car</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_2">ga</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_3">nd</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_4"><fmt:message key="home.page.tab.home.loading.spPl"/></div>
			<div class="inTurnFadingTextG inTurnFadingTextG_5">an</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_6">ifi</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_7">ca</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_8">cio</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_9">nes</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_10">..</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_11">.</div>
		</div>
		<div id="warningGradientOuterBarG" style="margin-top:20%; margin-left:25%;">
			<div id="warningGradientFrontBarG" class="warningGradientAnimationG">
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
			</div>
		</div>
    </div>
    <div id="loadingRoomSpinner" class="planning_l_spinner">
        <div id="inTurnFadingTextG" style="width: 100%;">
        <div class="inTurnFadingTextG inTurnFadingTextG_1">C</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_2">ar</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_3">ga</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_4">nd</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_5"><fmt:message key="home.page.tab.home.loading.spPlR"/></div>
			<div class="inTurnFadingTextG inTurnFadingTextG_6">al</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_7">on</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_8">es</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_9">.</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_10">.</div>
			<div class="inTurnFadingTextG inTurnFadingTextG_11">.</div>
		</div>
		<div id="warningGradientOuterBarG" style="margin-top:20%; margin-left:25%;">
			<div id="warningGradientFrontBarG4" class="warningGradientAnimationG">
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
				<div class="warningGradientBarLineG"></div>
			</div>
		</div>
    </div>
	<div id="reservationTab">
		<div id="reservationTitle">
			<h1><fmt:message key="home.page.reservation.title"/></h1>
			<div id="divReservationPeriod">
				<label id="resPeriodStartDay">Inicio: </label><input id="resStartDayPeriod" class="filterInputDateReservation" readonly="readonly"/>&nbsp;
				<label id="resPeriodEndDay">Fin: </label><input id="resEndDayPeriod" class="filterInputDateReservation" readonly="readonly"/>&nbsp;
				<button id="confirmPeriodReservation" class="filterButtons" onclick="loadDailyReservationPeriod()">Cargar reservas</button>
			</div>
			<div id="referencesReservation">
				<div class="divReferenceReservation"><img src="<c:url value="/resources/images/Verde.jpg"/>"/><h3 class="referenceConfigText">Reserva confirmada.</h3></div>
				<div class="divReferenceReservation"><img src="<c:url value="/resources/images/Gris.jpg"/>"/><h3 class="referenceConfigText">Reserva no confirmada.</h3></div>
			</div>
		</div>
		<div id="scheduler_reservation" class="dhx_cal_container" style='width: 100%; height: 80%;'>
					<div class="dhx_cal_navline">						
						<div class="dhx_cal_prev_button">&nbsp;</div>
						<div class="dhx_cal_next_button">&nbsp;</div>
						<div class="dhx_cal_today_button"></div>
						<div class="dhx_cal_date"></div>
						<div class="dhx_cal_tab" name="day_tab" style="right: 204px;"></div>
						<div class="dhx_cal_tab" name="week_tab" style="right: 140px;"></div>
						<div class="dhx_cal_tab" name="month_tab" style="right: 76px;"></div> 
					</div>
					<div class="dhx_cal_header"></div>
					<div class="dhx_cal_data"></div>
		</div>
	</div>
	<sec:authorize ifAnyGranted="1,2">
	<div id="planificationTab">
		<div id="firstScreen">
			<h1><fmt:message key="home.page.tab.planning.title"/></h1>
			<div id="planningFilters">
				<label id="plannStatusFilter">Estado: </label><select id="cmbPlannStatusFilter" style="width: 15%;height: 4%;" >
				<option value="ALL">Todas</option>IN_PROCESS, WAITING_CONFIRMATION, IN_CONFLICT, CONFIRMED,ENDED
				<option value="NOT_CONFIRMED" selected="selected">No confirmada</option>
				  <option value="IN_PROCESS">En proceso</option>
				  <option value="WAITING_CONFIRMATION">Esperando confirmación</option>
				  <option value="CONFIRMED">Confirmada</option>
				  <option value="IN_CONFLICT">En conflicto</option>
				  <option value="ENDED">Finalizada</option>
				</select>&nbsp;&nbsp;&nbsp;<label id="plannStatusFilterCareer">Carrera: </label>
				<select style="width: 15%;height: 4%;" id="cmbPlannCareerFilter">
				</select>
				&nbsp;&nbsp;&nbsp;
				<button id="btnFilterPlanns" class="filterButtons" onclick="doPlanningFilter()">Filtrar</button>
			</div>
			<p/>
			<div id="selectPlanification">
				<div id="panelBlockPlanning"></div>
				<div id="contentPlanifications">
				</div>
				<button id="openPlanification" onclick="openPlanification()" class="appButtons positionButtonPlannification"><fmt:message key="home.page.tab.openPlann"/></button>
				<button id="deletePlanification" onclick="deletePlanification()" class="appButtons positionButtonPlannification"><fmt:message key="home.page.tab.deletePlann"/></button>
				<button id="newPlanificacion" onclick="newPlanification(true)" class="appButtons positionButtonPlannification"><fmt:message key="home.page.tab.newPlann"/></button>
				<!-- BOTON DESCONFIRMAR: USAR DISPLAY NONE PARA QUE NO APREZCA DE PRIMERA SINO CUANDO SE SELECCIONE UNA PLANIFICACION CONFIRMADA (VER SI SE PUEDE HACER) 
					SACARLO DE CUANDO SE APRETA PLAN RECIBIDAS
				-->
				<button id="unConfirmPlanification" onclick="unConfirmPlanification()" class="appButtons positionButtonPlannification"><fmt:message key="home.page.tab.unConfirmPlann"/></button>
				<sec:authorize ifAnyGranted="1">
				<button id="unlockPlanifiactionbutton" style="display: none;" onclick="unlockSendedPlanifiaction()" class="appButtons positionButtonPlannification"><fmt:message key="home.page.tab.planificationTab.unlockPlann"/></button>
				<button id="closePlanifiactionbutton" style="display: none;" onclick="closeSendedPlanifiaction()" class="appButtons positionButtonPlannification"><fmt:message key="home.page.tab.closeReceivedPlanns"/></button>
				<button id="sendedPlanifiactionbutton" onclick="getSendedPlanifiaction()" class="appButtons positionButtonPlannification"><fmt:message key="home.page.tab.receivedPlanns"/></button>
				</sec:authorize>
				<div id="contentPlanificationsRecived">
				</div>
			</div>
			<div id="selectCareerAndYear">
				<div id="logicSelectCareerAndYear" style="position:relative;float:left;width: 55%;">
					<div class="selectCareerAndYear">
						<label><fmt:message key="home.page.tab.planificationTab.career"/> </label><input id="autocompleteCareer"  title="type &quot;a&quot;"/>
						<label><fmt:message key="home.page.tab.planning.year"/></label><select id="selectYear" style="width: 5.5%;"></select>
					</div>
					<div class="selectCareerAndYear">
						<label><fmt:message key="home.page.tab.planificationTab.planPeriod.title"/> </label>
						<select id="selectPeriod" onchange="changePeriodSelected();"></select>
						<input id="startPeriodSelected" class="filterInputDate" readonly="readonly" style="background-color: #d0d6d6;"/>
						<input id="finishPeriodSelected" class="filterInputDate" readonly="readonly" style="background-color: #d0d6d6;"/>
					</div>
					<div class="selectCareerAndYear">
						<button id="confirmCareerAndYear" onclick="goToCalendar()" class="appButtons"><fmt:message key="home.page.tab.planificationTab.planning"/></button>
						<button id="closeHistorybutton" style="display: none;" onclick="closeHistory()" class="appButtons"><fmt:message key="home.page.tab.planificationTab.closeHistory"/></button>
						<button id="historyCareerAndYear" onclick="goToHistory()" class="appButtons"><fmt:message key="home.page.tab.planificationTab.history"/></button>
						<button id="loadHistoryCareerAndYear" style="display: none;" onclick="planningFromHistory()" class="appButtons"><fmt:message key="home.page.tab.planificationTab.historySelect"/></button>
						<button id="cancelCareerAndYear" onclick="newPlanification(false)" class="appButtons"><fmt:message key="home.page.tab.planificationTab.plannCancel"/></button>
					</div>
					<div id="contentHistoryPlanifications" class="selectCareerAndYear">
					</div>
				</div>
				<div id="manualSelectCareerAndYear" style="position:relative;float:left;width: 40%;">
					<h3><fmt:message key="home.page.tab.manual.intro"/></h3>
					<ol>
						<li><p><fmt:message key="home.page.tab.manual.stepOne"/></p></li>
						<li><p><fmt:message key="home.page.tab.manual.stepTwo"/></p></li>
						<li><p><fmt:message key="home.page.tab.manual.stepThree"/></p></li>
						<li><p><fmt:message key="home.page.tab.manual.stepFour"/></p></li>
						<li><p><fmt:message key="home.page.tab.manual.stepFive"/></p></li>
						<li><p><fmt:message key="home.page.tab.manual.stepSix"/></p></li>
						<li><p><fmt:message key="home.page.tab.manual.stepSeven"/></p></li>
						<li><p><fmt:message key="home.page.tab.manual.stepEight"/></p></li>
					</ol>
				</div>
			</div>
		</div>
		<div id="secondScreen" style="display: none;">
			<div style="display: inline;">
			<div id="divCalendarTitle">
				<h3 id="calendarTitle"></h3>
				<h3 id="calendarSubTitle" style="margin-top: -5%;"></h3>
			</div>
			<button id="cancelCalendar" onclick="returnFromCalendar();" class="appButtons"><fmt:message key="home.page.tab.planificationTab.plann.return"/></button>
			<button id="configPlanification" onclick="openConfigPanel();" class="appButtons"><fmt:message key="home.page.tab.planificationTab.plann.configuration"/></button>
			<sec:authorize ifAnyGranted="1">
				<button id="executeGlobalConlfict" onclick="executeGlobalConlfict();" class="appButtons"><fmt:message key="home.page.tab.planificationTab.plann.executeGlobalConlfict"/></button>
			</sec:authorize>
			<button id="conflictPlanification" onclick="openConflictPanel();" class="appButtons"><fmt:message key="home.page.tab.planificationTab.plann.seeConlfict"/></button>
			<button id="sendPlanification" onclick="sendPlanning();" class="appButtons"><fmt:message key="home.page.tab.planificationTab.plann.planningSend"/></button></div>
			<sec:authorize ifAnyGranted="1">
				<button id="confirmReservations" onclick="confirmPlanning();" class="appButtons"><fmt:message key="home.page.tab.planificationTab.plann.reservationsConfirm"/></button>
			</sec:authorize>
			<div id="sendPlanificationDialog" style="display: none;" title="Enviar Planificacion.">
				<p><fmt:message key="home.page.tab.planificationTab.plann.sendPlanQMsg"/></p>
				<button id="sendOk" onclick="sendPlanificationPhaseTwo()" class="appButtons"><fmt:message key="home.page.tab.planificationTab.plann.planningSendMsgOk"/></button>
			</div>
			<div id="confirmReservationDialog" style="display: none;" title="Confirmar Reservas.">
				<p><fmt:message key="home.page.tab.planificationTab.plann.confrimReservMsg"/></p>
				<button id="confirmOk" onclick="confirmReservationsPhaseTwo()" class="appButtons"><fmt:message key="home.page.tab.planificationTab.plann.confirmReservationsMsgOk"/></button>
			</div>
			<div id="executeGlobalConfReservationDialog" style="display: none;" title="Verificar Conflictos entre facultades">
				<p><fmt:message key="home.page.tab.planificationTab.plann.executeGobalConfMsg"/></p>
				<button id="verifyOk" onclick="executeGlobalConfPhaseTwo()" class="appButtons"><fmt:message key="home.page.tab.planificationTab.plann.confirmGlobalConfMsgOk"/></button>
			</div>
			<br/>
			<div style="margin-top: 45px;">
				<div id="configPanel">
					<div id="timePanel">
						<h1 style="color: #576365;"><fmt:message key="home.page.tab.planificationTab.plann.confPanel.title"/></h1>
						<div id="periodSelectedConfigPanel"></div>
						<br></br>
						<div id="addSpecialPeriod">
							<label style="color: #576365;"><fmt:message key="home.page.tab.planificationTab.plann.confPanel.subjectSel"/></label><input type="text" id="autocompleteSignaturePanelConfig"/>
							<label style="color: #576365;"><fmt:message key="home.page.tab.planificationTab.plann.confPanel.courseInit"/></label><input type="text" id="panelConfigSignatureStartDay" class="panelConfigDatePicker"/>
							<label style="color: #576365;"><fmt:message key="home.page.tab.planificationTab.plann.confPanel.courseEnd"/></label><input type="text" id="panelConfigSignatureEndDay" class="panelConfigDatePicker"/>
							<button id="addSignaturePanelConfig" onclick="addSignature();" class="appButtons" style="margin-top:1%;"><fmt:message key="home.page.tab.planificationTab.plann.confPanel.add"/></button>
						</div>
						<div id="references">
							<div class="divReference"><h1>Referencias</h1></div>
							<div class="divReference"><img src="<c:url value="/resources/images/Gris.jpg"/>"/><h3 class="referenceConfigText">Intento de reserva no guardado.</h3></div>
							<div class="divReference"><img src="<c:url value="/resources/images/Amarilla.jpg"/>"/><h3 class="referenceConfigText">Intento de reserva guardado.</h3></div>
							<div class="divReference"><img src="<c:url value="/resources/images/Roja.jpg"/>"/><h3 class="referenceConfigText">Intento de reserva en conflicto.</h3></div>
							<div class="divReference"><img src="<c:url value="/resources/images/Azul.jpg"/>"/><h3 class="referenceConfigText">Intento de reserva enviado.</h3></div>
							<div class="divReference"><img src="<c:url value="/resources/images/Verde.jpg"/>"/><h3 class="referenceConfigText">Reserva confirmada.</h3></div>
						</div>
					</div>					
					<div id="addSignaturePanel">
						<h1 style="color: #576365;"><fmt:message key="home.page.tab.planificationTab.plann.confPanel.subjectSpecialTitle"/></h1>
					</div>
				</div>
				<div id="conflictPanel">
					<h1 style="color: black;"><fmt:message key="home.page.tab.planificationTab.planConflTitle"/></h1>
					<div id="conflictPanelContent"></div>
				</div>
				<div id="scheduler_planning" class="dhx_cal_container" style='width: 100%; height: 80%;'>
					<div class="dhx_cal_navline">
						<div class="dhx_cal_date"></div>
					</div>
					<div class="dhx_cal_header"></div>
					<div class="dhx_cal_data"></div>
				</div>
			</div>
		</div>
	</div>
	</sec:authorize>
	<div id="roomsTab">
		<h1><fmt:message key="home.page.tab.rooms.title"/></h1>
		
		<div id="roomFilterContent">
			<div class="filter">
				<label><fmt:message key="home.page.tab.rooms.filter.minCapacity"/></label><input id="minCapacity" class="filterInput" maxlength="3"/>
			</div>
			<div class="filter">
				<label><fmt:message key="home.page.tab.rooms.filter.maxCapacity"/></label><input id="maxCapacity" class="filterInput" maxlength="3"/>
			</div>
			<div class="filter" id="filterShift" style="display: none;">
				<label><fmt:message key="home.page.tab.rooms.filter.turn"/></label><select id="selectTurn" class="filterSelect"></select>
			</div>
			<div class="filter">
				<label><fmt:message key="home.page.tab.rooms.filter.initTime"/></label><select style="width:60px;" id="startTime" class="filterInput" onchange="setAvailables();"></select>
			</div>
			<div class="filter">
				<label><fmt:message key="home.page.tab.rooms.filter.endTime"/></label><select style="width:60px;" id="endTime" class="filterInput" onchange="setAvailables();"></select>
			</div>
			<div class="filter" id="filterStartDay">
				<label><fmt:message key="home.page.tab.rooms.filter.initDay"/></label><input id="startDay" class="filterInputDate" onchange="setAvailables();" readonly/><input id="startDay2" class="filterInputDate" style="display: none;" onchange="setAvailables();" readonly/>
			</div>
			<div class="filter" id="filterEndDay">
				<label><fmt:message key="home.page.tab.rooms.filter.endDay"/></label><input id="endDay" class="filterInputDate" onchange="setAvailables();" readonly/><input id="endDay2" class="filterInputDate" style="display: none;" onchange="setAvailables();" readonly/>
			</div>
			<div class="filter" id="filterSelectDay" style="display: none;">
				<label><fmt:message key="home.page.tab.rooms.filter.days"/></label>
				<div id="selectedDayInFilter" style="position: relative; width: 65%; float: right;">
					<div style="height:10%;position:relative;float:left;"><input type="checkbox" id="rfLunes" name='selectDay' value="1" onchange="setAvailables();"/>L</div>
					<div style="height:10%;position:relative;float:left;"><input type="checkbox" id="rfMartes" name='selectDay2' value="2" onchange="setAvailables();"/>M</div>
					<div style="height:10%;position:relative;float:left;"><input type="checkbox" id="rfMiercoles" name='selectDay3' value="3" onchange="setAvailables();"/>Mi</div>
					<div style="height:10%;position:relative;float:left;"><input type="checkbox" id="rfJueves" name='selectDay4' value="4" onchange="setAvailables();"/>J</div>
					<div style="height:10%;position:relative;float:left;"><input type="checkbox" id="rfViernes" name='selectDay5' value="5" onchange="setAvailables();"/>V</div>
					<div style="height:10%;position:relative;float:left;"><input type="checkbox" id="rfSabado" name='selectDay6' value="6" onchange="setAvailables();"/>S</div>
				</div>
			</div>
<!-- 			<div class="filter"> -->
<%-- 				<label><fmt:message key="home.page.tab.rooms.filter.building"/></label><select style="width:160px;" id="filterBuilding" class="filterInput" onchange="setAvailables();"></select> --%>
<!-- 			</div> -->
			<div class="filter">
				<label><fmt:message key="home.page.tab.rooms.filter.room"/></label><input id="roomToFilter" class="filterInput" maxlength="5"/>
			</div>
			<div class="filter">
				<label><fmt:message key="home.page.tab.rooms.filter.available"/></label>
				<div class="filterInputCheck">
					<div class="filterInputCheckInterno"><fmt:message key="home.page.tab.rooms.filter.available.yes"/><input id='rbAvYes' type='radio' name='available' value="true"/></div>
					<div class="filterInputCheckInterno"><fmt:message key="home.page.tab.rooms.filter.available.not"/><input type='radio' name='available' checked="checked" value="false"/></div>
				</div>
			</div>
			<div class="filter" style="margin-top: 30%;">
				<button onclick="doFilterPhaseZero();" class="appButtons"><fmt:message key="home.page.tab.rooms.filter.filtering"/></button>
			</div>
		</div>
		<div id="roomsContent">
		</div>
		<div id="showImgRoom" class='divAllPage' style="display:none;"><img id="imgForShowRoom" onclick="setSizeImgRoomBack();" style="max-width: 100%;max-height: 100%"/></div>
	</div>
	<div id="reservByEnvTab">
		<div id="reservationByEnvTitle">
			<h1><fmt:message key="home.page.tab.reservation.by.env.home.title"/></h1>
			<div id="envReservViewCombo">
				<label id="priorityRoomName">Ambiente: </label><select id="priorityRoomNameResByEnv" style="width: 10%;" onchange="getReservationByEnv()"></select>
			</div>
			<p/>
		</div>
		<div id="scheduler_reserv_by_env" class="dhx_cal_container" style='width: 100%; height: 80%;'>
					<div class="dhx_cal_navline">						
						<div class="dhx_cal_prev_button">&nbsp;</div>
						<div class="dhx_cal_next_button">&nbsp;</div>
						<div class="dhx_cal_today_button"></div>
						<div class="dhx_cal_date"></div>
						<div class="dhx_cal_tab" name="day_tab" style="right: 204px;"></div>
						<div class="dhx_cal_tab" name="week_tab" style="right: 140px;"></div>
					</div>
					<div class="dhx_cal_header"></div>
					<div class="dhx_cal_data"></div>
		</div>	
	</div>
	<!-- <div id="mailTab">
		<p>Aqui usted podra enviar mails a quien sea necesario, tener en cuenta que la persona a la cual usted le envia no sabra quien es si usted no
		se lo dice explicitamente en el cuerpo del mail. Es una solucion pensada para que se pueda comunicar y coordinar las reservas de ambientes con sus
		colegas de trabajo. Gracias.</p>
		<div id="mailHead" style="margin-bottom: 1%; margin-top:1%;"><h1>Redactar mensaje</h1></div>
		<div id="mailTo">
			<div>Para:</div>
			<div><input type="text" id="to" name="to" size="30"></div>
		</div>
		<div>
			<div>Asunto:</div>
			<div><input type="text" id="subject" name="subject" size="30"></div>
		</div>
		<div>
			<div>Mensaje:</div>
			<div><textarea id="description" name="description" type="text" cols="40" rows="15" size="100"></textarea></div>
		</div>
		<p><input type="submit" onclick="jsonMail();" value="Enviar"></p>
	</div> -->
	<div id="helpTab">
		<a class="media" href="<c:url value="resources/doc/Manual de usuario.pdf"/>" style="width: 80%; height: 80%;"></a> 
	</div>
	<div id="creditsTab">
		 <div id="creditsHead">
		 	<div id="creditsImages">
		 		<img id="creditsImage" src="<c:url value="/resources/images/catoEnma.png"/>"/>
		 	</div>
		 	<div id="creditsText">
		 		<p><fmt:message key="home.page.tab.credits.textOne"/></p>
		 	</div>
		 </div>
	</div>
	<div id="presentationTab">
		<div class="image-block">
			<div id="presentationImage1">
			  <img src="<c:url value="/resources/images/ucu.png"/>"/>
			  <div class="reflection">
			    <img src="<c:url value="/resources/images/ucu.png"/>"/>
			  </div>
		    </div>
		  <div id="titleDiv">
		  		<h1><fmt:message key="home.page.tab.home.newTitle.1"/></h1>
		  		<h3><fmt:message key="home.page.tab.home.newTitle.2"/></h3>
		  </div>
		  <div id="presentationImage2">
			  <img align="middle" src="<c:url value="/resources/images/EnmaLogo.jpg"/>"/>
			  <div class="reflection">
			    <img src="<c:url value="/resources/images/EnmaLogo.jpg"/>"/>
			  </div>
		  </div>
		</div>
	</div>
</div>
</body>
</html>